<script setup lang="ts">
interface Props {
    tabs: { label: string; value: string | number }[];
    activeValue: string | number;
    vertical?: boolean;
    scrollAuto?: boolean;
}
const props = withDefaults(defineProps<Props>(), { tabs: () => [], activeValue: "", vertical: false, scrollAuto: false });
const emits = defineEmits(["update:activeValue", "change"]);
</script>

<template>
    <div :class="{ 'my-tab': true, vertical: props.vertical, 'scroll-auto': props.scrollAuto }">
        <button v-for="v in props.tabs" :key="v.value" :class="{ active: activeValue == v.value }" @click="emits('update:activeValue', v.value), emits('change', v.value)">
            {{ v.label }}
        </button>
    </div>
</template>

<style scoped lang="scss">
.my-tab {
    position: relative;
    flex-shrink: 0;
    display: flex;
    z-index: 6;
    &.vertical {
        flex-direction: column;
        button {
            &::after {
                width: 3px;
                height: 0;
                left: auto;
                top: 50%;
                right: 0;
                bottom: auto;
                transform: translateY(-50%);
            }
            &.active {
                &::after {
                    height: 80%;
                    width: 3px;
                }
            }
        }
    }
    &.scroll-auto {
        overflow: auto;
        button {
            flex: 0 1 auto;
        }
    }
    button {
        position: relative;
        min-height: 40px;
        min-width: 120px;
        flex: 1;
        color: #333;
        font-size: 18px;
        font-weight: bold;
        transition: color, background-color 0.2s;
        &::after {
            content: "";
            position: absolute;
            left: 50%;
            bottom: 0;
            width: 0;
            height: 3px;
            transform: translateX(-50%);
            background-color: var(--primary-color);
            transition: width 0.2s;
        }
        &:hover {
            background-color: #ccc;
        }
        &.active {
            color: var(--primary-color);
            &::after {
                width: 80%;
            }
        }
    }
}
</style>
